<template>
    <div id="appRoot">
        <sidebar>
            <div class="collection-page">
                <div class="collection-header">
                    <div class="tab-control">
                        <a href="javascript:;" :class="tabActive === 0 ? 'active' : ''" @click="toggleTab(0)">文本输入框</a>
                        <a href="javascript:;" :class="tabActive === 1 ? 'active' : ''" @click="toggleTab(1)">导入本地文件</a>
                    </div>
                    <div class="tips">表格类型的数据以word或excel格式从本地导入</div>
                </div>
                <div class="collection-body">
                    <el-form :model="data" :rules="rules" ref="ruleForm">
                        <el-form-item label="标题：" label-width="120px" prop="title">
                            <el-input v-model="data.title" auto-complete="off" placeholder="输入标题"></el-input>
                        </el-form-item>
                        <el-form-item label="正文：" label-width="120px" prop="dataInfo">
                            <el-input v-if="tabActive === 0" v-model="data.dataInfo" auto-complete="off" type="textarea" placeholder="输入正文"></el-input>

                            <el-upload
                                    v-else
                                    class="upload-demo"
                                    drag
                                    action="/OSSClientFileImport"
                                    :data="{action: 'fileUpload'}"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :before-upload="handleBefore"
                                    :on-success="uploadSuccess"
                                    :file-list="fileList">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传execl, word, txt文件</div>
                            </el-upload>
                        </el-form-item>
                        <div class="inline">
                            <el-form-item label="数据出处：" label-width="120px" prop="source">
                                <el-select v-model="data.source" placeholder="请选择数据出处">
                                    <el-option v-for="item in sourceConfig" :label="item.name" :value="item.id" :key="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="隶属部门：" label-width="120px" prop="tradeId">
                                <el-select v-model="data.tradeId" placeholder="请选择隶属部门">
                                    <el-option v-for="item in tradeConfig" :label="item.tradeName" :value="item.tradeId" :key="item.tradeId"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="inline">
                            <el-form-item label="所属大类：" label-width="120px" prop="source">
                                <el-select v-model="data.businessId" placeholder="请选择数据出处">
                                    <el-option v-for="item in businessConfig" :label="item.busiName" :value="item.busiId" :key="item.busiId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="作者：" label-width="120px" prop="author">
                                <el-input v-model="data.author" auto-complete="off" placeholder="作者"></el-input>
                            </el-form-item>
                        </div>
                        <div class="inline">
                            <el-form-item label="数据时间：" label-width="120px" prop="date">
                                <el-date-picker
                                        v-model="data.date"
                                        type="year"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item label="所在地区" label-width="120px" class="area-select">
                                <el-select v-model="queryData.proviceId" placeholder="省" @change="changeProvince">
                                    <el-option v-for="item in provinceList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
                                </el-select>
                                <el-select v-model="queryData.cityId" placeholder="市" @change="changeCity">
                                    <el-option v-for="item in cityList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
                                </el-select>
                                <el-select v-model="queryData.townId" placeholder="区">
                                    <el-option v-for="item in townList" :label="item.orgName" :value="item.orgId" :key="item.orgId"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item label="网址：" label-width="120px" prop="website">
                            <el-input v-model="data.website" auto-complete="off" placeholder="网址"></el-input>
                        </el-form-item>

                        <el-form-item label="" label-width="120px">
                            <el-button type="primary" @click="submitData">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </sidebar>
    </div>
</template>

<script>
    import sidebar from 'components/layout/sidebar.vue'
    import card from 'components/layout/card.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
    import {qryBusinessConfig, qryTradeConfig, sourceConfig} from 'common/unitQry.js'
    import moment from 'moment'
    export default{
        data(){
            return {
                tabActive: 0,
                collectionType: '',
                fileName: '',
                fileList: [],
                tradeConfig: [],
                sourceConfig: [],
                businessConfig: [],
                loading: false,
                data: {
                    title: '',
                    dataInfo: '',
                    source: '',
                    businessId: '',
                    tradeId: '',
                    author: '',
                    date: '',
                    orgId: '',
                    website: '',
                },
                rules: {

                },
                queryData: {
                    cityId:'',
                    proviceId: '',
                    townId: ''
                },
                provinceList: [],
                cityList: [],
                townList: [],
            }
        },
        mounted(){
            qryBusinessConfig().then(data => {
                this.businessConfig = data.data.items || [];
            });
            qryTradeConfig().then(data => {
                this.tradeConfig = data.data.items || [];
            });
            sourceConfig().then(data => {
                this.sourceConfig = data.data.items || [];
            });

            this.getProvinceList();
        },
        methods: {
            changeProvince(){
                this.queryData.cityId = '';
                this.cityList = [];
                this.getCityList();
            },
            changeCity(){
                this.queryData.townId = '';
                this.townList = [];
                this.getTownList();
            },
            getProvinceList(){
                this.getAreaData(1, -1).then(data => {
                    this.provinceList = data.data.items;
                })
            },
            getCityList(){
                if(!this.queryData.proviceId){return;}
                this.getAreaData(2, this.queryData.proviceId).then(data => {
                    this.cityList = data.data.items;
                })
            },
            getTownList(){
                if(!this.queryData.cityId){return;}
                this.getAreaData(3, this.queryData.cityId).then(data => {
                    this.townList = data.data.items;
                })
            },
            getAreaData(type, id){
                return ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.reports,
                    action: 'qryReportOrg',
                    data: {
                        orgType: type,
                        parentOrgId: id
                    }
                })
            },

            toggleTab(active){
                this.tabActive = active;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            uploadSuccess(response, file, fileList){
                this.fileName = response.data.fileName;
            },
            handleBefore(file){
                if(this.fileList.length >= 1){
                    this.$alert('请先删除之前上传的文件', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                    return false;
                }

                let ext = /\.(.+)$/.exec(file.name);
                ext = ext !== null ? ext[1] : null;
                switch (ext){
                    case 'doc':
                        this.collectionType = ext;
                        break;
                    case 'xlsx':
                        this.collectionType = ext;
                        break;
                    case 'txt':
                        this.collectionType = ext;
                        break;
                    default:
                        this.collectionType = '';
                }
                if(!this.collectionType){
                    this.$alert('只能上传execl, word', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                    return false;
                }else{
                }
            },
            submitData(){
                let action , data;
                if(this.tabActive === 0){
                    action = 'impDataByTxt';
                    data = Object.assign({},this.data, {
                        date: moment(this.data.date).format('YYYY')
                    });
                }else{
                    if(this.collectionType === 'doc'){
                        action = 'impDataByDoc';
                    }else if(this.collectionType === 'xlsx'){
                        action = 'impDataByXls';
                    }else if(this.collectionType === 'txt'){
                        action = 'impDataByTxt';
                    }
                    data = Object.assign({},this.data, {
                        date: moment(this.data.date).format('YYYY')
                    }, {filePath: this.fileName});
                }
                data.orgId = this.queryData.townId || this.queryData.cityId || this.queryData.proviceId;
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.collection,
                    action: action,
                    data: data
                }).then(data => {
                    if(data.resultCode === '9999'){
                        this.$alert('系统错误，请联系维护人员处理', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
//                                location.reload();
                            }
                        });
                    }else{
                        this.$alert('提交成功', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                location.href = '/storageBatch.html?batchNo='+data.data.batchNo+'&id='+data.data.fileId+'&isCollection=true'
                            }
                        });
                    }
                }).catch((err) => {

                })
            }
        },
        components: {
            sidebar,
            card
        }
    }
</script>

<style lang="scss">

    .area-select{
        .el-select{
            display: inline-block;
            width: 80px;
        }
    }
    .inline{
        .el-form-item{
            display:inline-block
        }
    }
    .collection-page{
        background-color: #fff;
        border: 1px solid #ebebeb;
    }
    .collection-header{
        padding: 5px 10px;
        border-bottom: 1px solid #ebebeb;
        .tab-control{
            display: inline-block;
            vertical-align: middle;
            width: 215px;
            height: 24px;
            a {
                float: left;
                display: block;
                width: 50%;
                font-size: 12px;
                line-height: 24px;
                background-color: #8b8b8b;
                text-align: center;
                color: #fff;
                &.active{
                    background-color: #2196f3;
                }
            }
        }
        .tips{
            display: inline-block;
            font-size: 12px;
            color: #b9b9b9;
            line-height: 24px;
            margin-left: 20px;
        }
    }
    .collection-body{
        padding: 10px;
        .el-form{
            max-width: 700px;
        }
        .el-select .el-input__inner{
            padding-right: 10px;
        }
    }

    .demo-table-expand {
        padding: 0 15px;
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>